<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
        <ActionBar v-role="['worker','workerGroupLeader','backup']" />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :multiple-selected="false"
        class="fixed-table-table"
        @selection-change="onSelectionChange"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :width="column.width" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-role="['worker']" type="text" title="编辑" size="mini" icon="el-icon-edit" @click="edit(row.id)" />
            <el-button v-role="['worker']" type="text" title="删除" size="mini" icon="el-icon-delete" @click="remove(row.id)" />
            <el-button type="text" title="查看" size="mini" icon="el-icon-notebook-2" @click="view(row.id)" />
            <el-button type="text" title="导出" size="mini" icon="el-icon-download" @click="exportExcel(row.id)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <ViewDialog title="查看" class="fixed-dialog-height" :show.sync="dialogViewVisible" width="80%" @on-cancel="viewCancel">
      <ViewForm v-if="dialogViewVisible" :id="editId" />
    </ViewDialog>
    <FormDialog title="编辑" class="fixed-dialog-height" :show.sync="dialogFormVisible" width="80%" :footer-show="false" @on-cancel="cancel">
      <EditForm v-if="dialogFormVisible" :id="editId" ref="editForm" />
    </FormDialog>
  </div>
</template>

<script>
// secondary package based on el-pagination
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import FormDialog from '@neu/biz-core/components/FormDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import ViewForm from './components/viewForm'
import EditForm from './components/editForm'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import { page, remove, download } from '@neu/dcom-ui/api/monthWeekly'
import { getToken } from '@neu/biz-core/utils/auth'
export default {
  name: 'MonthWeeklyPage',
  components: {
    TableFilter,
    FormDialog,
    EditForm,
    ActionBar,
    PageableTable,
    ViewDialog,
    ViewForm
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        { title: '月', key: 'operationTime', sortable: 'custom', width: '120', render: (h, params) => { return h('span', formatDate(params.row.operationTime, 'YYYY 年 MM 月')) } },
        { title: '单位名称', key: 'clientName', sortable: 'custom', width: '180' },
        { title: '运维组长', key: 'operationUserName', sortable: 'custom', width: '120' },
        { title: '驻场工程师', key: 'residentEngineerUserName', sortable: 'custom', width: '120' },
        { title: '机动工程师', key: 'mobileEngineerUserName', sortable: 'custom', width: '120' },
        { title: '本月总结', key: 'monthSummary' }
      ],
      dialogFormVisible: false,
      dialogViewVisible: false,
      editId: -1,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Authentication': getToken()
      },
      fileName: '月报' + formatDate(new Date())
    }
  },
  methods: {
    view(id) {
      // 打开对话框
      this.dialogViewVisible = true
      this.editId = id
    },
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.editId = id
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
    },
    cancel() {
      this.editId = -1
      // 关闭对话框
      this.dialogFormVisible = false
      this.refresh()
    },
    viewCancel() {
      this.editId = -1
      // 关闭对话框
      this.dialogViewVisible = false
    },
    // 导出
    exportExcel(id) {
      download(id).then(res => {
        const content = res
        const blob = new Blob([content])
        const fileName = this.fileName + '.docx'
        // not IE downLoad
        if ('download' in document.createElement('a')) {
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }
  }
}
</script>
